{% extends "admin/framework.twig" %}
{% block title %}
    <h1>
        发布新文章
        <small>发布一篇新的文章</small>
    </h1>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <form method="post" id="form-form">
                        <div class="col-xs-8 form-group">
                            <div class="col-xs-12 form-group">
                                <label for="lb-title" class="col-xs-3 control-label">
                                    <span style="color:red">*</span>文章标题:
                                </label>
                                <div class="col-xs-6">
                                    <input type="text" class="form-control" id="lb-title" name="title" maxlength="16">
                                </div>
                            </div>
                            <div class="col-xs-12 form-group">
                                <label for="lb-titleColor" class="col-xs-3 control-label">
                                    标题颜色:
                                </label>
                                <div class="col-xs-6">
                                    <div class="input-group my-colorpicker colorpicker-element">
                                        <input type="text" class="form-control" id="lb-titleColor" name="titleColor"
                                               value="#000000">
                                        <div class="input-group-addon">
                                            <i style="background-color: rgb(255, 0, 0);"></i>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.input group -->
                            </div>
                            <div class="col-xs-12 form-group">
                                <label for="lb-classify" class="col-xs-3 control-label">
                                    文章分类:
                                </label>
                                <div class="col-xs-6">
                                    <select class="form-control" id="lb-classify" name="classify">
                                        {% for classify in article_classifys %}
                                            <option value="{{ classify.id }}">{{ classify.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <!-- /.input group -->
                            </div>
                        </div>


                        <div class="col-xs-12 form-group">
                            <label class="col-xs-3 control-label"><span style="color:red">*</span>文章内容:</label>
                            <div class="col-xs-12">
                                <div class="form-group editor">
                                </div>
                                <input id="lb-content" name="content" hidden>
                            </div>
                        </div>
                        <div class="col-xs-8 form-group">
                            <div class="col-xs-12 form-group">
                                <label for="lb-releaseTime" class="col-xs-3 control-label">
                                    <span style="color:red">*</span>发布时间:
                                </label>
                                <div class="col-xs-7">
                                    <div class="input-group date">
                                        <div class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </div>
                                        <input type="text" class="form-control pull-right my-datepicker"
                                               id="lb-releaseTime"
                                               name="releaseTime" data-date-format="yyyy-mm-dd hh:ii">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="col-xs-12 form-group">
                        <p id="tip"></p>
                    </div>
                </div>
                <div class="box-footer">
                    <div class="col-xs-offset-5">
                        <button type="button" id="formSubmit" class="btn btn-info">发布</button>
                    </div>
                </div>
                <!-- /.box-body -->
                <div id="Dialog" title="">
                    <iframe id="Dialog-iframe" frameborder="0" src="" width="100%" height="450"></iframe>
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>
{% endblock %}
{% block extend_scripts %}
    <script>
        $(function () {
            $('.my-colorpicker').colorpicker({
                format: "hex"
            });
            $('.my-datepicker').datetimepicker({
                    autoclose: true,
                    format: 'yyyy-mm-dd hh:ii',
                    todayBtn: true,
                    minuteStep: 2,
                    language: 'zh-CN',
                }
            );
            var E = window.wangEditor;
            var editor = new E('.editor');
            editor.customConfig.zIndex = 1;
            // 关闭粘贴样式的过滤
            editor.customConfig.pasteFilterStyle = false;
            editor.create();

            $("#formSubmit").click(function () {
                //将editor转到input是为了方便serialize
                $("#lb-content").val(editor.txt.html());
                console.log($('#form-form').serialize())
                $.ajax(
                    {
                        url: "{{ myurl.add }}",
                        data: $('#form-form').serialize(),
                        type: "POST",
                        beforeSend: function () {
                            $("#tip").html('<div class="alert alert-info alert-dismissible"><i class="icon fa fa-info"></i>请稍等...</div>');
                            return true;
                        },
                        success: function (data) {
                            data = JSON.parse(data);
                            if (data['state']) {
                                $("#tip").html(data['data']);
                            } else {
                                $("#tip").html(data['data']);
                            }
                        }
                    });
                return false;
            })

        })
    </script>
{% endblock %}